<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <th:block th:include="include :: header_mp('能源账单')" />
</head>
<body>

<header class="mui-bar mui-bar-nav">
    <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
    <h1 class="mui-title">能源账单</h1>
</header>

<div class="mui-content">

    <div class="mui-card">
        <div class="mui-card-header">名称</div>
        <div class="mui-card-content">
            <div class="mui-card-content-inner"><p th:text="${energyBill?.name}"></p></div>
        </div>
    </div>

    <div class="mui-card">
        <div class="mui-card-header">账单类型</div>
        <div class="mui-card-content">
            <div class="mui-card-content-inner"><p th:text="${energyBill?.energyTypeDict?.name}"></p></div>
        </div>
    </div>

    <div class="mui-card">
        <div class="mui-card-header">账单月份</div>
        <div class="mui-card-content">
            <div class="mui-card-content-inner"><p th:text="${#dates.format(energyBill?.billDate, 'yyyy-MM-dd')}"></p></div>
        </div>
    </div>

    <div class="mui-card">
        <div class="mui-card-header">单价</div>
        <div class="mui-card-content">
            <div class="mui-card-content-inner"><p th:text="${energyBill?.price}"></p></div>
        </div>
    </div>

    <div class="mui-card">
        <div class="mui-card-header">使用量</div>
        <div class="mui-card-content">
            <div class="mui-card-content-inner"><p th:text="${energyBill?.useCount}"></p></div>
        </div>
    </div>

    <div class="mui-card">
        <div class="mui-card-header">总金额</div>
        <div class="mui-card-content">
            <div class="mui-card-content-inner"><p th:text="${energyBill?.totalAmount}"></p></div>
        </div>
    </div>

    <div class="mui-card">
        <div class="mui-card-header">条形码</div>
        <div class="mui-card-content">
            <div class="mui-card-content-inner"><p th:text="${energyBill?.barcode}"></p></div>
        </div>
    </div>

    <div class="mui-card">
        <div class="mui-card-header">备注</div>
        <div class="mui-card-content">
            <div class="mui-card-content-inner"><p th:text="${energyBill?.remark}"></p></div>
        </div>
    </div>

</div>


</body>
<th:block th:include="include :: footer_mp" />
</html>